import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Row, Col, Button, Icon } from 'antd';
import {ImgPreview} from 'knk';


class ImgPreviewDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false
        };
        this.onClose = this.onClose.bind(this);
        this.handleOpen = this.handleOpen.bind(this);
    }

    componentDidMount() {
    }

    componentWillUnmount() {
    }

    handleOpen(){
        this.setState({
            open: true,
        })
    }

    onClose(){
        this.setState({
            open: false,
        })
    }

    render() { 
        const { open } = this.state;   
        const path = 'https://rms.test.zbjdev.com/resource/redirect?key=homesite%2Ftask%2F%E6%91%A9%E6%89%98%E8%BD%A6%E8%B4%B4%E7%BA%B81.jpg%2Forigine%2F06db8589-589f-486d-a61b-ddf50391778a'; 
        return (
            <div>
                <Row style={{marginTop: 20}}>
                    <Col span={4}><div>图片预览：</div></Col>
                    <Col span={20}>
                        <img src={path} alt="" style={{width: 100, height: 100, cursor: 'pointer'}} onClick={this.handleOpen}/>
                    </Col>
                    <ImgPreview 
                        open={open}  
                        images={[{source: path}]}
                        onClose={this.onClose}
                    />
                </Row>
            </div>
        );
    }
}

ImgPreviewDemo.propTypes = {
};

export default ImgPreviewDemo;